.preview {
  background: #f1f1f1;
  box-sizing: border-box;
  padding: 2rem 4rem;
  z-index: 999;
  left: $actionbar-width;
}

.preview-inner {
  height: 100%;

  margin: 0 auto;
  width: 100%;
  max-width: 1440px;

  transition: all 150ms cubic-bezier(0.1, 0.7, 1.0, 0.1);

  &.desktop {
  }

  &.tablet {
    max-width: 800px;
    max-height: 1280px;
  }

  &.mobile {
    max-width: 375px;
    max-height: 667px;
  }
}

.preview-actionbar {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;

  &--view-btn {
    display: inline-block;
    color: $gray-darker;

    & > i {
      margin-right: 0.5rem;
    }

    &:hover {
      border-color: $brand-primary;
    }

    &.is-disabled {
      color: $gray-light;
    }
  }

  &--screensize-btn {
    display: inline-block;
    border-bottom: 2px solid transparent;
    color: $gray-darker;
    margin-left: 1rem;
    cursor: pointer;
  }

  .is-screensize-active {
    border-color: $brand-primary;
  }
}

.preview-iframe {
  position: relative;
  height: calc(100% - 4rem); // hack
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 0 0 12px rgba(0, 0, 0, 0.1);

  & > .scrollable, & > &-loader {
    transition: opacity 100ms ease-in;
  }

  & > .scrollable {
    z-index: 999;
    opacity: 1;
  }

  & > &-loader {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    opacity: 0;

    img {
      display: block;
      width: 12rem;
    }

    p {
      margin-top: 2rem;
    }
  }

  &--loading > .scrollable {
    opacity: 0;
    z-index: 998;
  }

  &--loading > &-loader {
    opacity: 1;
    z-index: 999;
  }
}
